{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="ADMIN_CSS/virtualgoods_lists.css">
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>当前显示的是已经审核通过的虚拟商品，当商品处于上架状态时前台显示。</li>
			<li>虚拟商品用户购买之后可以通过订单核销进行商品核销处理。</li>
			<li>平台可以针对违规商品进行违规下架处理，违规下架的商品重新编辑审核之后才能上架。</li>
		</ul>
	</div>
</div>

<div class="ns-screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">筛选</h2>
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">搜索方式：</label>
					<div class="layui-input-inline">
						<select name="search_text_type">
							<option value="goods_name">商品名称</option>
							<option value="site_name">店铺名称</option>
						</select>
					</div>
					<div class="layui-input-inline">
						<input type="text" name="search_text" autocomplete="off" class="layui-input" placeholder="输入商品名称/店铺名称" />
					</div>
				</div>
			</div>

			<div class="layui-form-item">

				<div class="layui-inline">
					<label class="layui-form-label">审核状态：</label>
					<div class="layui-input-inline">
						<select name="verify_state">
							<option value="">全部</option>
							{foreach name="$verify_state" item="vo" key="k"}
							<option value="{$k}">{$vo}</option>
							{/foreach}
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">商品分类：</label>
					<div class="layui-input-inline">
						{include file="goods/category_select" /}
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品品牌：</label>
					<div class="layui-input-inline">
						<select name="goods_brand" lay-search=""></select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">商品类型：</label>
					<div class="layui-input-inline">
						<select name="goods_attr_class" lay-search=""></select>
					</div>
				</div>
			</div>
			
			<input type="hidden" name="goods_state" />

			<div class="ns-form-row">
				<button class="layui-btn ns-bg-color" lay-submit id="" lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<div class="layui-tab ns-table-tab" lay-filter="goods_list_tab">
	<ul class="layui-tab-title">
		<li class="layui-this" lay-id="">全部</li>
		<li lay-id="1">销售中</li>
		<li lay-id="0">仓库中</li>
	</ul>
	<div class="layui-tab-content">
		<table id="goods_list" lay-filter="goods_list"></table>
	</div>
</div>

<!-- 商品信息 -->
<script type="text/html" id="goods_info">
	<div class="ns-table-tuwen-box">
		<div class="contraction" data-goods-id="{{d.goods_id}}" data-open="0">
			<span>+</span>
		</div>
		<div class="ns-img-box">
			<img layer-src src="{{ns.img(d.goods_image.split(',')[0])}}"/>
		</div>
		<div class="ns-font-box">
			<a href="javascript:;" class="ns-multi-line-hiding ns-text-color">{{d.goods_name}}</a>
		</div>
	</div>
</script>

<!-- 操作 -->
<script type="text/html" id="action">
	<div class="operation-wrap" data-goods-id="{{d.goods_id}}">
		<div class="popup-qrcode-wrap"><img class="popup-qrcode-loadimg" src="__STATIC__/loading/loading.gif" /></div>
		<div class="ns-table-btn">
			<a class="layui-btn" lay-event="select">推广</a>
			<a class="layui-btn" lay-event="lockup">违规下架</a>
		</div>
	</div>
</script>

<!-- 批量删除 -->
<script type="text/html" id="batchOperation">
	<button class="layui-btn layui-btn-primary" lay-event="lockup">违规下架</button>
</script>

<!-- SKU商品列表 -->
<script type="text/html" id="skuList">
	<tr class="js-sku-list-{{d.index}}">
		<td></td>
		<td colspan="7">
			<ul class="sku-list">
				{{# for(var i=0;i<d.list.length;i++){ }}
				<li>
					<div class="img-wrap">
						<img src="{{ns.img(d.list[i].sku_image)}}">
					</div>
					<div class="info-wrap">
						<span class="sku-name">{{d.list[i].sku_name}}</span>
						<span class="price">价格：￥{{d.list[i].price}}</span>
						<span class="stock">库存：{{d.list[i].stock}}</span>
						<span class="sale_num">销量：{{d.list[i].sale_num}}</span>
					</div>
				</li>
				{{# } }}
			</ul>
		</td>
	</tr>
</script>
<!-- 商品推广 -->
<script type="text/html" id="goods_url">
	{{# if(d.path.h5.status == 1){ }}
	<img src="{{ ns.img(d.path.h5.img) }}" alt="推广二维码">
	<p class="qrcode-item-description">扫码后直接访问商品</p>
	<a class="ns-text-color" href="javascript:ns.copy('h5_url_{{ d.goods_id }}');">复制链接</a>
	<a class="ns-text-color" href="{{ ns.img(d.path.h5.img) }}" download>下载二维码</a>
	<input class="layui-input nc-len-mid" type="text" value="{{ d.path.h5.url }}" id="h5_url_{{ d.goods_id }}" readonly>
	{{# } }}
</script>
{/block}
{block name="script"}
<script>
	var laytpl, form,element,repeat_flag;
	$(function () {
		$("body").on("click", ".contraction", function () {
			var goods_id = $(this).attr("data-goods-id");
			var open = $(this).attr("data-open");
			var tr = $(this).parent().parent().parent().parent();
			var index = tr.attr("data-index");
			
			if (open == 1) {
				$(this).children("span").text("+");
				$(".js-sku-list-" + index).remove();
			} else {
				$(this).children("span").text("-");
				$.ajax({
					url: ns.url("admin/virtualgoods/getGoodsSkuList"),
					data: {goods_id: goods_id},
					dataType: 'JSON',
					type: 'POST',
					async: false,
					success: function (res) {
						var list = res.data;
						var sku_list = $("#skuList").html();
						var data = {
							list: list,
							index: index
						};
						laytpl(sku_list).render(data, function (html) {
							tr.after(html);
						});
						
					}
				});
			}
			$(this).attr("data-open", (open == 0 ? 1 : 0));
			
		});
		
		layui.use(['form', 'laytpl', 'element'], function () {
			form = layui.form;
			repeat_flag = false; //防重复标识
			laytpl = layui.laytpl;
			element = layui.element;
			form.render();

			//商品品牌
			goodsBrand();
			//商品类型
			goodsSattr();
			
			//监听Tab切换，以改变地址hash值
			element.on('tab(goods_list_tab)', function () {
				$("input[name='goods_state']").val(this.getAttribute('lay-id'));
				$("button[lay-filter='search']").click()
			});
			
			var table = new Table({
				elem: '#goods_list',
				url: ns.url("admin/virtualgoods/lists"),
				cols: [
					[{
						type: 'checkbox',
						unresize: 'false',
						width: '3%'
					},
						{
							title: '商品信息',
							unresize: 'false',
							width: '20%',
							templet: '#goods_info'
						},
						{
							field: 'site_name',
							title: '店铺名称',
							unresize: 'false',
							width: '10%',
						},

						{
							field: 'price',
							title: '价格(元)',
							unresize: 'false',
							width: '10%'
						},
						{
							field: 'goods_stock',
							title: '库存',
							unresize: 'false',
							width: '9%'
						},
						{
							field: 'sale_num',
							title: '销量',
							unresize: 'false',
							width: '7%'
						},
						{
							title: '商品状态',
							unresize: 'false',
							width: '8%',
							templet: function (data) {
								var str = '';
								if (data.goods_state == 1) {
									str = '上架';
								} else if (data.goods_state == 0) {
									str = '下架';
								}
								return str;
							}
						},
						{
							title: '审核状态',
							unresize: 'false',
							width: '8%',
							templet: function (data) {
								var str = '';
								if (data.verify_state == 1) {
									str = '已审核';
								} else if (data.verify_state == 0) {
									str = '待审核';
								} else if (data.verify_state == 10) {
									str = '<a href="javascript:getVerifyStateRemark(' + data.goods_id + ');" class="ns-text-color">违规下架</a>';
								} else if (data.verify_state == -1) {
									str = '审核中';
								} else if (data.verify_state == -2) {
									str = '审核失败';
								}
								return str;
							}
						},
						{
							title: '操作',
							toolbar: '#action',
							unresize: 'false',
							width: '12%'
						}
					]
				],
				bottomToolbar: "#batchOperation"
			});
			
			/**
			 * 监听工具栏操作
			 */
			table.tool(function (obj) {
				var data = obj.data;
				switch (obj.event) {
					case 'lockup':
						//违规下架
						lockup(data.goods_id);
						break;
					case 'select': //推广
						goods_url(data);
						break;
				}
			});
			
			/**
			 * 商品推广
			 */
			function goods_url(data) {
				$(".operation-wrap[data-goods-id='" + data.goods_id + "'] .popup-qrcode-wrap").css("display", "block");
				$('#goods_name').html(data.goods_name);
				$.ajax({
					type: "POST",
					url: ns.url("admin/goods/goodsUrl"),
					data: {
						'goods_id': data.goods_id
					},
					dataType: 'JSON',
					success: function (res) {
						if (res.data.path.h5.status == 1) {
							res.data.goods_id = data.goods_id;
							laytpl($("#goods_url").html()).render(res.data, function (html) {
								$(".operation-wrap[data-goods-id='" + data.goods_id + "'] .popup-qrcode-wrap").html(html).show();
								
								$("body").click(function (e) {
								    if (!$(e.target).closest(".popup-qrcode-wrap").length) {
								        $(".operation-wrap[data-goods-id='" + data.goods_id + "'] .popup-qrcode-wrap").hide();
								    }
								});
							});
						} else {
							layer.msg(res.data.path.h5.message);
						}
					}
				});
				
			}
			
			//商品下架
			function lockup(goods_ids) {
				
				layer.prompt({
					formType: 2,
					title: '违规下架原因',
					cancel: function (index, layero) {
						repeat_flag = false;
					},
					end: function () {
						repeat_flag = false;
					}
				}, function (value, index, elem) {
					if (repeat_flag) return;
					repeat_flag = true;
					layer.close(index);
					$.ajax({
						url: ns.url("admin/virtualgoods/lockup"),
						data: {verify_state_remark: value, goods_ids: goods_ids.toString()},
						dataType: 'JSON',
						type: 'POST',
						success: function (res) {
							layer.msg(res.message);
							repeat_flag = false;
							if (res.code == 0) {
								table.reload();
							}
						}
					});
					
				});
				
			}
			
			/**
			 * 批量操作
			 */
			table.bottomToolbar(function (obj) {
				if (obj.data.length < 1) {
					layer.msg('请选择要操作的数据');
					return;
				}
				var id_array = new Array();
				for (i in obj.data) id_array.push(obj.data[i].goods_id);
				switch (obj.event) {
					case 'lockup':
						//违规下架
						lockup(id_array.toString());
						break;
				}
			});
			
			/**
			 * 搜索功能
			 */
			form.on('submit(search)', function (data) {
				table.reload({
					page: {
						curr: 1
					},
					where: data.field
				});
				return false;
			});
			
		});
		
	});
	
	/**
	 * 获取违规下架原因
	 * @param goods_id
	 */
	function getVerifyStateRemark(goods_id){
		$.ajax({
			url: ns.url("admin/virtualgoods/getVerifyStateRemark"),
			data: {goods_id: goods_id},
			dataType: 'JSON',
			type: 'POST',
			success: function (res) {
				var data = res.data;
				if (data) {
					layer.open({
						title: '违规下架原因'
						,content: data.verify_state_remark
					});
				}
			}
		});
		
	}
	
	//商品品牌
	function goodsBrand() {
	    var brandHtml = "";
	    $.ajax({
	        url: ns.url("admin/goodsbrand/lists"),
	        type: 'POST',
	        dataType: 'JSON',
	        success: function (res) {
	            brandHtml += '<option value="">直接选择或搜索选择</option>';
	            $.each(res.data.list, function (key, val) {
	                brandHtml += '<option value="${val.brand_id}">${val.brand_name}</option>';
	            });
	            $("select[name='goods_brand']").html(brandHtml);
	            form.render('select');
	        }
	    });
	}
	
	//商品类型
	function goodsSattr() {
	    var sattrHtml = "";
	    $.ajax({
	        url: ns.url("admin/goodsattr/lists"),
	        type: 'POST',
	        dataType: 'JSON',
	        success: function (res) {
	            sattrHtml += '<option value="">直接选择或搜索选择</option>';
	            $.each(res.data.list, function (key, val) {
	                sattrHtml += '<option value="${val.class_id}">${val.class_name}</option>';
	            });
	            $("select[name='goods_attr_class']").html(sattrHtml);
	            form.render('select');
	        }
	    });
	}
</script>
{/block}